<template>
	<view class="page">
		<view class="search_top">
			<view class="search_fix_top">
				<view class="search_input_view">
					<image class="search_icon" :src="imgPrefix('/static/image/icon/search_icon.png')"></image>
					<input
						class="search_input"
						@confirm="toSearch(searchValue)"
						placeholder-class="search_input_placeholder"
						:placeholder="placeholder"
						v-model="searchValue"
						type="text"
					/>
				</view>
				<view class="search_type">
					<view @tap.stop="bindTypeItem1(index)" class="search_type_item" v-for="(item, index) in ['智能排序', '语种等级', '更多选择']" :key="index">
						<text :class="['search_type_text', screenType[index].state ? 'active' : '']">{{ item }}</text>
						<image
							v-if="screenType[index].state"
							:class="['search_type_icon', 'ts-2', bindScreenIndex == index ? 'tf-180' : '']"
							:src="imgPrefix('/static/image/icon/search_next_active.png')"
						></image>
						<image
							v-else
							:class="['search_type_icon', 'ts-2', bindScreenIndex == index ? 'tf-180' : '']"
							:src="imgPrefix('/static/image/icon/search_next.png')"
						></image>
					</view>
				</view>
			</view>
			<view :class="['screen_view', bindScreenIndex > -1 ? 'show' : '']">
				<scroll-view scroll-y class="scroll_view">
					<view class="screen_main">
						<block v-for="(itemy, indey) in screenType[bindScreenIndex].list" :key="indey">
							<view v-if="itemy.title" class="screen_view_title">{{ itemy.title }}</view>
							<view v-if="bindScreenIndex == 2 && indey == 2" class="search_price_input_view">
								<input @input="setInputValue($event, 0)" placeholder="最低价格" :value="screenType[2].list[1].price[0]" maxlength="5" type="number" class="search_price_input" />
								<text class="search_price_text">至</text>
								<input @input="setInputValue($event, 1)" placeholder="最高价格" :value="screenType[2].list[1].price[1]" maxlength="5" type="number" class="search_price_input" />
							</view>
							<view :class="['screen_view_list', bindScreenIndex != 1 ? 'set_margin' : '']">
								<view
									v-for="(itemz, indez) in itemy.item"
									:key="indez"
									:class="['screen_item', itemz.select ? 'active' : '']"
									@tap.stop="bindScreenItem(indey, indez)"
								>
									{{ itemz.title }}
								</view>
							</view>
						</block>
					</view>
				</scroll-view>
				<view class="screen_bottom">
					<image class="result_view" @tap.stop="bindResultBtn" :src="imgPrefix('/static/image/icon/result_icon.png')"></image>
					<view class="screen_btn" @tap.stop="bindTypeItem(bindScreenIndex)">确定</view>
				</view>
			</view>
			<zan-popup :show="bindScreenIndex > -1" @close="bindTypeItem1(bindScreenIndex)"></zan-popup>
		</view>
		<mescroll-uni
			@init="mescrollInit"
			ref="mescrollRef"
			top="180"
			:bottom="isIPhoneX ? 68 : 0"
			offset="80"
			@down="downCallback"
			:up="upOption"
			@up="upCallback"
		>
			<view :class="['course_list', lange != '' ? 'lange' : '']">
				<view v-if="lange != ''" class="lange_list_title">
					<text class="lange_list_text">
						已按需求整合出合适您优秀教师
						<text class="lange_list_icon"></text>
					</text>
				</view>
				<course-list :selectList="selectList" :lat="latitude" :lon="longitude" :listType="1" @bind-index="toTeacherDetail"></course-list>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
const app = getApp();
import { commonMixinFun } from '@/static/mixins/common.js'; //公共
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js'; // 上下拉加载
import { changeQuery } from '@/static/uitls/common.js'; //改变传参
import { getLocation } from '@/static/uitls/getLocation.js'; // 获取经纬度
import zanPopup from '@/components/popup/index.vue'; //弹窗阴影

import courseList from '@/components/course-list/index.vue'; // 课程列表
import API from '@/static/api/index.js';
import { setCourseFormat } from '@/static/uitls/changeData.js';
export default {
	components: {
		zanPopup,
		courseList
	},
	mixins: [commonMixinFun, MescrollMixin],
	data() {
		return {
			mescroll:'',
			defaultStatus:false,//是否缺省
			isShowNoMore:false,
			total:0,//总条数
			lange: '',
			latitude: '',
			longitude: '',
			searchValue: '',
			placeholder: '输入老师/语种进行查找',
			bindScreenIndex: -1,
			screenType: [
				{
					state: true, // 是否有选择项
					list: [
						{
							title: '', //标题
							item: [
								{ title: '智能排序', select: true ,english:'weigh'},
								{ title: '离我最近', select: false ,english:'distance'},
								{ title: '评分最高', select: false ,english:'score'},
								{ title: '授课最多', select: false ,english:'finish'}
							],
							type: 'radio' // 选择类型
						}
					]
				},
				{
					state: false, // 是否有选择项
					list: [
						{
							title: '', //标题
							item: [
								// { title: 'A1入门', select: false },
								// { title: 'A2基础', select: false },
								// { title: 'B1进阶', select: false },
								// { title: 'B2高阶', select: false },
								// { title: 'C1流利运用', select: false },
								// { title: 'C2商业精通', select: false }
							],
							type: 'checkbox' // 选择类型
						}
					]
				},
				{
					state: false, // 是否有选择项
					list: [
						// {
						// 	title: '教师类型', //标题
						// 	item: [{ title: '职业教师', select: false ,sex:1}, { title: '非职业教师', select: false ,sex:0}],
						// 	type: 'checkbox' // 选择类型
						// },
						{
							title: '教学经验', //标题
							item: [
								{ title: '三年以上', select: false },
								{ title: '五年以上', select: false },
								{ title: '七年以上', select: false },
								{ title: '十年以上', select: false }
							],
							type: 'radio' // 选择类型
						},
						{
							title: '价格区间', //标题
							price: ['', ''],
							item: [
								{ title: '150元以下', select: false ,max:150},
								{ title: '200元以下', select: false ,max:200},
								{ title: '250元以下', select: false ,max:250},
								{ title: '300元以下', select: false ,max:300}
							],
							type: 'radio' // 选择类型
						}
					]
				}
			],
			selectList: [],
			upOption: {
				page: {
					num: 0,// 当前页 默认0,回调之前会加1; 即callback(page)会从1开始
					size:10// 每页数据条数,默认10
				},
				// noMoreSize:5,// 如果列表已无数据,可设置列表的总数量要大于1才显示无更多数据;
				isBounce:true,
				textLoading: '加载中',
				textNoMore: '没有更多了~',
				empty: {
					tip: '找不到该内容', // 提示
					icon:'https://wxapp.well-talk.com/static/image/default_icon.png'
				}
			}
		};
	},
	onLoad(option) {
		option = changeQuery(this.getSceneData(option), 'obj');
		this.searchValue = option.value;
		this.lange = option.lange || '';
		app._log(option);
		if (option.lange) {
			uni.setNavigationBarTitle({
				title: option.lange
			});
		}
	},
	onShow() {
		this.historyList = app.globalData.searchHistory||[];
		this._getLocation();
	},
	methods: {
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
		},
		//搜索
		_search(){
			// let {num,size} = this.upOption.page
			let {searchValue,screenType,mescroll} = this
			let obj={
				page:mescroll.num,//页码
				size: mescroll.size,//每页显示条数
				search_name:searchValue,//搜索名称
				order_by:'',//排序：weigh-智能，distance-距离，score-评分，finish-授课
				grade:'',//等级，多个：1,2
				sex:'',//性别：1-男，2-女
				teaching_year:'',//教学经验
				min_price:'',//最小价格
				max_price:'',//最大价格
				profession:''//是否职业：0=非职业教师，1=职业教师
			}
			//如果有排序start
			if(screenType[0].state){
				let itemList= screenType[0].list[0].item
				for (let i = 0; i <itemList.length; i++) {
					if(itemList[i].select){
						obj.order_by=itemList[i].english
					}
				}
			}
			//如果有排序end
			//如果有等级start
			if(screenType[1].state){
				let itemList= screenType[1].list[0].item;
				if(itemList.length!=0){
					let tempArr = itemList.filter(o=>o.select==true);
					if(tempArr.length>0){
						let arr = []
						tempArr.forEach((e,i)=>{
							arr.push(e.language_grade_id)
						})
						obj.grade=arr.join(',')
					}
				}
			}
			//如果有等级end
			//如果有性别start
			// if(screenType[2].state){
			// 	let itemList= screenType[2].list[0].item
			// 	for (let i = 0; i <itemList.length; i++) {
			// 		if(itemList[i].select){
			// 			obj.profession=itemList[i].sex
			// 		}
			// 	}
			// }
			//如果有性别end
			//如果有教学经验start
			if(screenType[2].state){
				let itemList= screenType[2].list[0].item
				for (let i = 0; i <itemList.length; i++) {
					if(itemList[i].select){
						obj.teaching_year=itemList[i].title
					}
				}
			}
			//如果有教学经验end
			// 最小价格
			if(screenType[2].list[1].price[0]){
				obj.min_price=screenType[2].list[1].price[0]
			}
			// 最大价格
			if(screenType[2].list[1].price[1]){
				obj.max_price=screenType[2].list[1].price[1]
			}
			// 最大价格
			if(screenType[2].state){
				let itemList= screenType[2].list[1].item
				for (let i = 0; i <itemList.length; i++) {
					if(itemList[i].select){
						obj.min_price=0
						obj.max_price=itemList[i].max
					}
				}
			}
			app._log("obj:::",obj)
			API.search(obj).then(({code,data,msg})=>{
				if(code==1){
					this.defaultStatus=false
					this.total=data.total;
					let {teacher_course,grade}=data;
					//设置列表数据（判断是否第一页，是第一页的话就赋值，不是第一页的话就合并数组）
					app._log(grade)
					let arr = [];
					grade.forEach(e=>{
						arr.push({title:e.title,language_grade_id:e.language_grade_id,select:false})
					})
					this.screenType[1].list[0].item=arr;
					if(mescroll.num == 1){
						this.selectList= setCourseFormat(teacher_course);
					}else{
						this.selectList=this.selectList.concat(setCourseFormat(teacher_course));
					}
					mescroll.endByPage(teacher_course.length, this.total); 
					setTimeout(()=>{
						//没有数据的时候显示空状态
						if(mescroll.num == 1&&teacher_course.length==0){
							// 隐藏上拉加载的布局
							mescroll.hideUpScroll()
							//显示无任何数据的空布局
							mescroll.showEmpty()
						}else if(this.selectList.length<this.total){
							 this.isShowNoMore = false;
							 mescroll.endUpScroll(this.isShowNoMore);
						 }else{
							 this.isShowNoMore = true;
							 mescroll.endUpScroll(this.isShowNoMore);
						 }
					 },1000)
				}else{
					this.showToast(msg||'请求失败')
				}
			}).catch(err=>{
				app._log(err);
			})	
		},
		// http://www.mescroll.com/uni.html?v=20200710#begin
		downCallback(mescroll) {
			// mixin里有,直接用里面的
			app._log('下拉事件');
			mescroll.resetUpScroll();
		},
		// 置底事件
		upCallback(mescroll) {
			app._log('组件课程页面到底了');
			this._search()
			// mescroll.endUpScroll(true)
			
		},
		// 获取用户位置信息
		_getLocation() {
			this.showLoading('加载中');
			let _this = this;
			getLocation(
				function(res) {
					let { code, latitude, longitude } = res;
					if (code) {
					} else {
						app._log(latitude, longitude);
						_this.latitude = latitude;
						_this.longitude = longitude;
					}
					app._log(res);
				},
				false,
				true,
				_this
			);
		},

		// 点击搜索
		toSearch(value = '') {
			app._log('9998',value)
			if (value.trim() == '') {
				this.showToast(this.placeholder);
			} else {
				app._log("this.historyList,,",this.historyList)
				app.globalData.searchHistory = [value,...new Set(this.historyList)];
			}
			this.mescroll.resetUpScroll();
		},
		// 点击确定
		bindTypeItem(index) {
			this.mescroll.resetUpScroll();
			this.bindScreenIndex = this.bindScreenIndex == index ? -1 : index;
		},
		// 点击标题分类
		bindTypeItem1(index){
			this.bindScreenIndex = this.bindScreenIndex == index ? -1 : index;
		},
		// 点击具体选项
		bindScreenItem(pIndex, cIndex) {
			let { screenType, bindScreenIndex } = this;
			let { list, state } = screenType[bindScreenIndex]; // 当谢下标的整个表单
			let { item, type } = list[pIndex];
			let { select } = item[cIndex];
			if (type == 'radio') {
				// 单选
				let index = item.findIndex(o => o.select == true);
				if (index != -1) {
					// 已选
					this.screenType[bindScreenIndex].list[pIndex].item[index].select = false;
				}
				this.screenType[bindScreenIndex].list[pIndex].item[cIndex].select = !select;
				//如果有选择价格一下就把input价格清空
				for (let k = 0; k < this.screenType[2].list[1].item.length; k++) {
					if(this.screenType[2].list[1].item[k].select){
						this.screenType[2].list[1].price[1]=''
						this.screenType[2].list[1].price[0]=''
					}
				}
			} else {
				//多选
				this.screenType[bindScreenIndex].list[pIndex].item[cIndex].select = !select;
			}
			this.checkListSelect();
		},

		// 检查列表是否有选择项
		checkListSelect() {
			let { screenType, bindScreenIndex } = this;
			let { list, state } = screenType[bindScreenIndex]; // 当谢下标的整个表单
			let { price } = screenType[2].list[1];
			// app._log(price)
			let newState = bindScreenIndex == 2 ? price[0] != '' || price[1] != '' : false;
			for (let i = 0; i < list.length; i++) {
				if (!newState) {
					newState = list[i].item.findIndex(o => o.select == true) != -1;
				}
			}
			//更新是否有选择
			if (state != newState) {
				this.screenType[bindScreenIndex].state = newState;
			}
		},
		// 重置按钮
		bindResultBtn() {
			let { screenType, bindScreenIndex } = this;
			let { list, state } = screenType[bindScreenIndex]; // 当谢下标的整个表单
			if(screenType[bindScreenIndex].state){
				uni.showModal({
					title: '温馨提醒',
					content: '您确定要重置吗？',
					success: res => {
						if (res.confirm) {
							list.forEach(e => {
								e.item.forEach(q => {
									q.select = false;
								});
							});
							if (bindScreenIndex == 2) {
								this.screenType[2].list[1].price = ['', ''];
							}
							this.screenType[bindScreenIndex].state = false;
							this.showToast('已重置');
						}
					}
				});
			}
		},
		// 点击教师view
		toTeacherDetail(type) {
			this.pageTo('/pages/teacher_detail/index?id='+this.selectList[type].teacher_course_id)
		},
		// 设置价格区间
		setInputValue(e, type) {
			let value = Number(e.detail.value);
			let { screenType } = this;
			if (value <= 0) {
				//
				this.screenType[2].list[1].price[type] = '';
			}else {
				this.screenType[2].list[1].price[type] = e.detail.value;
			}
			//如果有填值就把选择价格清空
			if(this.screenType[2].list[1].price[0]!=''||this.screenType[2].list[1].price[1]!=''){
				for (let i = 0; i < this.screenType[2].list[1].item.length; i++) {
					this.screenType[2].list[1].item[i].select=false
				}
			}
			// app._log(screenType[2].list[1].price[type])
			// app._log(data)
			this.checkListSelect();
		},
		
	}
};
</script>
<style lang="scss" scoped>
.page {
	background-color: #f8f8f8;
}
.search_ {
	&fix_top {
		width: 100vw;
		padding-top: 24rpx;
		background-color: #fff;
		position: fixed;
		left: 0rpx;
		top: 0rpx;
		z-index: 5001;
	}
	&top {
		width: 100vw;
		height: 180rpx;
		background-color: #ffffff;
		// 搜索框 star
		.search_input_view {
			width: 654rpx;
			height: 72rpx;
			background-color: #f4f4f4;
			border-radius: 36rpx;
			display: flex;
			align-items: center;
			padding: 0 22rpx;
			overflow: hidden;
			margin: 0 48rpx;
			.search_icon {
				width: 26rpx;
				height: 24rpx;
				margin-right: 12rpx;
			}
			.search_input {
				font-size: 26rpx;
				flex: 1;
				&_placeholder {
					color: #cccccc;
				}
			}
		}
		// 搜索框 end
		// 搜索分类标题 star
		.search_type {
			display: flex;
			justify-content: space-between;
			height: 84rpx;
			line-height: 40rpx;
			align-items: flex-end;
			margin-bottom: 2rpx;
			padding: 0 48rpx 24rpx;
			.search_type_ {
				&item {
					display: flex;
					align-items: center;
				}
				&text {
					font-size: 28rpx;
					color: #252748;
					&.active {
						color: #7f4aff;
					}
				}
				&icon {
					margin-left: 4rpx;
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
		// 搜索分类标题 end
		// 搜索分类view end
		.screen_ {
			&view {
				padding: 50rpx 48rpx 24rpx;
				background-color: #fff;
				position: absolute;
				left: 0rpx;
				top: -100vh;
				width: 100vw;
				transition: 0.3s;
				z-index: 1000;
				border-top: 2rpx solid #F8F8F8;
				&.show {
					top: 180rpx;
				}
				.scroll_view {
					width: 100%;
					max-height: 632rpx;
				}
			}
			&main {
				.search_price_input {
					flex: 1;
					padding: 16rpx 10rpx;
					line-height: 44rpx;
					border-bottom: 2rpx solid rgba(204, 204, 204, 0.5);
					text-align: center;
					box-sizing: unset;
					&_view {
						display: flex;
						// padding:24rpx 0;
						margin-bottom: 24rpx;
						align-items: center;
						.search_price_text {
							padding: 0 16rpx;
						}
					}
				}
			}
			&view_title {
				margin-bottom: 24rpx;
				display: flex;
				align-items: center;
			}
			&view_list {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 32rpx;
				max-width: 654rpx;
				// justify-content: space-between;
				// &::after {
				// 	//重要
				// 	flex: auto;
				// 	content: '';
				// }
				&.set_margin {
					//静态的设置为宽度固定
					.screen_item {
						padding: 0;
						width: 144rpx;
						text-align: center;
						&:nth-child(4n) {
							margin-right: 0rpx;
						}
					}
				}
				&:not(.set_margin) {
					//动态的
					.screen_item {
						padding: 0 25rpx;
					}
				}
			}
			&item {
				line-height: 66rpx;
				margin-bottom: 24rpx;
				margin-right: 24rpx;
				background-color: #f7f7f7;
				border-radius: 8rpx;
				font-size: 24rpx;
				color: #1f2633;
				white-space: nowrap;
				&.active {
					color: #7f4aff;
					background-color: rgba(127, 74, 255, 0.1);
				}
			}
			&bottom {
				margin-top: 32rpx;
				display: flex;
				justify-content: space-between;
				.result_view {
					width: 92rpx;
					height: 92rpx;
					margin-right: 24rpx;
				}
				.screen_btn {
					flex: 1;
					line-height: 92rpx;
					text-align: center;
					background-image: linear-gradient(270deg, #7f4aff 0%, #9254ff 100%);
					border-radius: 8rpx;
					font-size: 32rpx;
					color: #ffffff;
				}
			}
		}
		// 搜索分类view end
	}
}
.course_list {
	padding-top: 24rpx;
	&.lange {
		background-color: #fff;
		margin-top: 24rpx;
		.lange_list_ {
			&title {
				margin: 0rpx 48rpx 24rpx;
			}
			&text {
				display: block;
				width: 654rpx;
				line-height: 68rpx;
				color: #4e4f6b;
				background-color: #eff0f3;
				border-radius: 8rpx 8rpx 8rpx 0rpx;
				padding: 0 16rpx;
				position: relative;
				left: 0;
				top: 0;
				z-index: 999;
			}
			&icon {
				position: absolute;
				left: 0;
				bottom: -12rpx;
				display: block;
				width: 0px;
				height: 0px;
				border-color: #eff0f3 transparent transparent #eff0f3;
				border-width: 12rpx 16rpx 12rpx 16rpx;
				border-style: solid;
				z-index: 1000;
			}
		}
	}
}
.default_icon{
	width: 100%;
	height: 80vh;
	image{
		width: 396rpx;
		height: 396rpx;
		margin-top: 100rpx;
	}
}
</style>
